diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-13 17:45:59 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-13 17:45:59 +0100 |
| commit | 56878f647ea0f1066fa3e222d7aa0d83057f496d (patch) | |
| tree | 26f673a062741414bfa7db5d37990936ce115f49 /src/pages/blog/page/[number].tsx | |
| parent | 599b70cd2390d08ce26ee44174b3f39c6587110c (diff) | |
refactor(components): rewrite PostsList component
* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)
Diffstat (limited to 'src/pages/blog/page/[number].tsx')
| -rw-r--r-- | src/pages/blog/page/[number].tsx | 71 |
1 files changed, 65 insertions, 6 deletions
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx index 1c723f1..842c2b8 100644 --- a/src/pages/blog/page/[number].tsx +++ b/src/pages/blog/page/[number].tsx @@ -4,6 +4,7 @@ import type { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import Script from 'next/script'; +import { useCallback } from 'react'; import { useIntl } from 'react-intl'; import { getLayout, @@ -12,6 +13,9 @@ import { type MetaItemData, PageLayout, PostsList, + Pagination, + type RenderPaginationLink, + type RenderPaginationItemAriaLabel, } from '../../../components'; import { getArticles, @@ -131,7 +135,54 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ description: 'BlogPage: topics list widget title', id: '2D9tB5', }); - const postsListBaseUrl = `${ROUTES.BLOG}/page/`; + const renderPaginationLink: RenderPaginationLink = useCallback( + (pageNum) => `${ROUTES.BLOG}/page/${pageNum}`, + [] + ); + const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback( + ({ kind, pageNumber: number, isCurrentPage }) => { + switch (kind) { + case 'backward': + return intl.formatMessage( + { + defaultMessage: 'Go to previous page, page {number}', + description: 'BlogPage: previous page label', + id: 'faO6BQ', + }, + { number } + ); + case 'forward': + return intl.formatMessage( + { + defaultMessage: 'Go to next page, page {number}', + description: 'BlogPage: next page label', + id: 'oq3BzP', + }, + { number } + ); + case 'number': + default: + return isCurrentPage + ? intl.formatMessage( + { + defaultMessage: 'Current page, page {number}', + description: 'BlogPage: current page label', + id: 'JL6G22', + }, + { number } + ) + : intl.formatMessage( + { + defaultMessage: 'Go to page {number}', + description: 'BlogPage: page number label', + id: 'IVczxR', + }, + { number } + ); + } + }, + [intl] + ); const headerMeta: MetaItemData[] = totalArticles ? [ @@ -155,6 +206,12 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ ] : []; + const paginationAriaLabel = intl.formatMessage({ + defaultMessage: 'Pagination', + description: 'BlogPage: pagination accessible name', + id: 'AXe1Iz', + }); + return ( <> <Head> @@ -208,11 +265,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ />, ]} > - <PostsList - baseUrl={postsListBaseUrl} - byYear={true} - pageNumber={pageNumber} - posts={getPostsList([articles])} + <PostsList posts={getPostsList([articles])} sortByYear /> + <Pagination + aria-label={paginationAriaLabel} + current={pageNumber} + isCentered + renderItemAriaLabel={renderPaginationLabel} + renderLink={renderPaginationLink} total={totalArticles} /> </PageLayout> |